<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <!-- Meta, title, CSS, favicons, etc. -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="avalonjs - 迷你简单易用的前端MVVM框架，让你的网站更快更炫更好用">
        <meta name="keywords" content="MVVM, CSS, JavaScript, framework, avalon, web development">
        <meta name="author" content="RubyLouvre,司徒正美">


        <title>avalon中文文档</title>
        <script src="//files.cnblogs.com/files/rubylouvre/avalon.shim.js"></script>

        <!-- Bootstrap core CSS -->
        <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

        <link href="../../assets/css/patch.css" rel="stylesheet">

        <!-- Documentation extras -->

        <link href="../../assets/css/docs.min.css" rel="stylesheet">
        <style>
            body,html{
               overflow-y: hidden;
            }
        </style>
        <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script>
        <script src="../../assets/js/ie-emulation-modes-warning.js"></script>
        <![endif]-->
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

        <!-- Favicons -->
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
        <link rel="icon" href="/favicon.ico">

    </head>
    <body>




        <div class="container bs-docs-container">

            <div class="row">
                <div class="col-md-9" role="main">

<h1 class="page-header">拦截器</h1>
<h2 id="tutorial/interceptors/index.html">介绍</h2>
<p>拦截器是avalon在构建ms-duplex过程中,逐渐形成的一种增强机制,最初是用于数据类型转换.
    否则我们的数据在VM中无法是数字或布尔,都会统统变成字符串.于是在ms-duplex后面加一点修饰,
    让从表单元素获取的value值还原成我们之前的数据类型.
</p>
<p>拦截器机制到1.3.7才最终成型, 这时功能不限于类型转换,还能实现表单验证,光标处理,数据格式化^——^</p>
<p>于是从时间上划分, 1.3.7之前的称为duplex1.0, 1.3.7及之后的称为duplex2.0.
    到目前为止, avalon还是很有节操地支持duplex1.0, 关于两者的对应关系详见下表
</p>
<table class="table table-bordered">
    <col width="190"><col width="220">
    <tr><td>duplex2.0</td><td>duplex1.0</td><td>功能</td></tr>
    <tr><td>
            <code>ms-duplex-checked</code>
            <br>只能应用于radio、 checkbox
        </td>
        <td>
            <code>ms-duplex</code>
            <br>只能应用于radio
            <br><code>ms-duplex-radio</code>
            <br>checkbox
        </td>
        <td>通过checked属性同步VM</td>
    </tr>
    <tr>
        <td>
            <code>ms-duplex-string</code>
            <br>应用于所有表单元素
        </td>
        <td>
            <code>ms-duplex-text</code>
            <br>只能应用于radio
        </td>
        <td>通过value属性同步VM</td>
    </tr>
    <tr>
        <td>
            <code>ms-duplex-boolean</code>
            <br>应用于所有表单元素
        </td>
        <td>
            <code>ms-duplex-bool</code>
            <br>只能应用于radio
        </td>
        <td>value为&#8221;true&#8221;时转为true，其他值转为false同步VM</td>
    </tr>
    <tr>
        <td>
            <code>ms-duplex-number</code>
            <br>应用于表单元素
        </td>
        <td>没有对应项</td>
        <td>如果value是数字格式就转换为数值，否则不做转换，然后再同步VM</td>
    </tr>
</table>
<h2 id="ms-duplex-string">ms-duplex-string</h2>
<p>这是最简单的拦截器，因为我们从表单元素上取出来，就是字符串类型。它通常用于text, textarea, select, password等元素。</p>
<div class="bs-callout bs-callout-info">
    <p>我们可以简单地将除了radio, checkbox外的表单元素上的<code>ms-duplex</code>当成<code>ms-duplex-string</code>。</p>
</div>
<h2 id="ms-duplex-checked">ms-duplex-checked</h2>
<p>许多场合，我们的radio, checkbox并非用于上传数据，而是用于切换某个状态值，将true变成false或将false变成true，这个拦截器就发挥作用了。</p>
<p>它会将当前元素的checked属性值同步到VM的属性上，而checked属性无异乎上两个，true或false!</p>
<div class="bs-callout bs-callout-info" >
    <p>在duplex1.0中，我们默认radio的ms-duplex就相当于ms-duplex-checked，duplex2.0为了兼容旧版还是这样干，但建议直接使用ms-duplex-checked。</p>
</div>
<h2 id="ms-duplex-boolean">ms-duplex-boolean</h2>
<p>ms-duplex-boolean与ms-duplex-checked很相似，但它是将表单元素的value值转换为布尔。它的转换规则很简单，
    如果值为"true"，那么转换为true,其他统统转换成false.</p>
<h2 id="ms-duplex-number">ms-duplex-number</h2>
<p>将表单元素的value转换为数字, 不过转换规则比较复杂(这来源于现实中的业务需求,必须满足!), 因此在1.4.1中, 添加data-duplex-number辅助指令</p>
<ul>
    <li>如果它等于strong时,那么input.value的值为数字时就转换为数字，否则转换为0， 包括什么也不填时也转换为0</li>
    <li>如果它等于medium时,那么input.value的值为数字时就转换为数字，如果没有填时，就不转换，其他情况转换为0。
        这也是默认情况，如果你也没有设置data-duplex-number，就默认为medium。</li>
    <li>如果它等于weak时,那么input.value的值为数字时就转换为数字，否则就不进行转换</li>
</ul>

<div ms-skip style='background:rgb(237,237,237);padding:4px;'><pre class='brush:html;gutter:false;toolbar:false'>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;TODO supply a title&lt;/title&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;script src="avalon.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        var vm = avalon.define({
            $id: "test",
            a: true,
            b: true,
            c: "",
            d: "",
            e: 10,
            f: true,
            g: ["b", "c"],
            h: [1, 4],
            i: [false],
            j: "2222",
            k: 2222,
            l: false,
            m: ["bbbb", "dddd"],
            n: [11, 44],
            msg: ""
        });
        vm.$watch("*", function(a, b, c) {
            if (!/^avalon\-/.test(a) && c !== "msg") {
                vm.msg = c + "的值由[" + (typeof b) + "]" + b + "变成[" + (typeof a) + "]" + a
            }
        })
    &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div ms-controller="test"&gt;
        &lt;h3 style="text-align: center"&gt;ms-duplex 2.0&lt;/h3&gt;
        &lt;table&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;p&gt;ms-duplex-checked
                        &lt;input ms-duplex-checked="a" type="radio" /&gt;{{a}}&lt;/p&gt;
                    &lt;p&gt;ms-duplex-checked
                        &lt;input ms-duplex-checked="b" type="checkbox" /&gt;{{b}}&lt;/p&gt;
                    &lt;p&gt;ms-duplex-string
                        &lt;input ms-duplex="c" /&gt;{{c}}&lt;/p&gt;
                    &lt;p&gt;ms-duplex-string
                        &lt;input ms-duplex-string="d" /&gt;{{d}}&lt;/p&gt;
                    &lt;p&gt;ms-duplex-number
                        &lt;input ms-duplex-number="e" /&gt;{{e}}&lt;/p&gt;
                    &lt;p&gt;ms-duplex-boolean
                        &lt;input ms-duplex-boolean="f" data-duplex-event="change" /&gt;{{f}}&lt;/p&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;p&gt;ms-duplex-string
                        &lt;input ms-duplex-string="g" type="checkbox" value="a" /&gt;
                        &lt;input ms-duplex-string="g" type="checkbox" value="b" /&gt;
                        &lt;input ms-duplex-string="g" type="checkbox" value="c" /&gt;
                        &lt;input ms-duplex-string="g" type="checkbox" value="d" /&gt; {{g}}
                    &lt;/p&gt;
                    &lt;p&gt;ms-duplex-number
                        &lt;input ms-duplex-number="h" type="checkbox" value="1" /&gt;
                        &lt;input ms-duplex-number="h" type="checkbox" value="2" /&gt;
                        &lt;input ms-duplex-number="h" type="checkbox" value="3" /&gt;
                        &lt;input ms-duplex-number="h" type="checkbox" value="4" /&gt; {{h}}
                    &lt;/p&gt;
                    &lt;p&gt;ms-duplex-boolean
                        &lt;input ms-duplex-boolean="i" type="checkbox" value="false" /&gt;
                        &lt;input ms-duplex-boolean="i" type="checkbox" value="true" /&gt; {{i}}
                    &lt;/p&gt;
                    &lt;p&gt;ms-duplex-string/ms-duplex
                        &lt;select ms-duplex="j"&gt;
                            &lt;option&gt;1111&lt;/option&gt;
                            &lt;option&gt;2222&lt;/option&gt;
                            &lt;option&gt;3333&lt;/option&gt;
                        &lt;/select&gt;
                    &lt;/p&gt;
                    &lt;p&gt;ms-duplex-number
                        &lt;select ms-duplex-number="k"&gt;
                            &lt;option&gt;1111&lt;/option&gt;
                            &lt;option&gt;2222&lt;/option&gt;
                            &lt;option&gt;3333&lt;/option&gt;
                        &lt;/select&gt;
                    &lt;/p&gt;
                    &lt;p&gt;ms-duplex-boolean
                        &lt;select ms-duplex-boolean="l"&gt;
                            &lt;option&gt;true&lt;/option&gt;
                            &lt;option&gt;false&lt;/option&gt;
                        &lt;/select&gt;
                    &lt;/p&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;p&gt;ms-duplex-string/ms-duplex
                        &lt;br/&gt;
                        &lt;select ms-duplex="m" multiple&gt;
                            &lt;option&gt;aaaa&lt;/option&gt;
                            &lt;option&gt;bbbb&lt;/option&gt;
                            &lt;option&gt;cccc&lt;/option&gt;
                            &lt;option&gt;dddd&lt;/option&gt;
                        &lt;/select&gt;
                    &lt;/p&gt;
                    &lt;p&gt;ms-duplex-number
                        &lt;br/&gt;
                        &lt;select ms-duplex-number="n" multiple&gt;
                            &lt;option&gt;11&lt;/option&gt;
                            &lt;option&gt;22&lt;/option&gt;
                            &lt;option&gt;33&lt;/option&gt;
                            &lt;option&gt;44&lt;/option&gt;
                        &lt;/select&gt;
                    &lt;/p&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
        &lt;p&gt;{{msg}}&lt;/p&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;</pre></div>

</div>
<div class="col-md-3" role="complementary">

</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="../../assets/highlight/shCore.js"></script>

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

